<template>
    <div id="petSearch-body">
    <div id="petSearch-left">
        <div>&ensp;</div>
    <div id="petSearch">

        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" style="">
            <el-form-item label="名字" prop="petName" style="width: 180px" >
                <el-input
                        v-model="queryParams.petName"
                        placeholder="请输入名字"
                        clearable
                        @keyup.enter="handleQuery"

                />
            </el-form-item>
            <el-form-item label="性别 " prop="petSex" >
                <el-select v-model="queryParams.petSex" placeholder="请选择性别 " clearable style="width: 114px" >
                    <el-option
                            v-for="key in Object.keys(petSx)"
                            :key="key"
                            :label="key"
                            :value="petSx[key]"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="品种" prop="petKind" style="width: 230px" >
                <el-select v-model="queryParams.petKind" placeholder="请选择品种" clearable style="width:114px;">
                    <el-option
                            v-for="key in  kindList.value"
                            :key="key"
                            :label="key.petKind"
                            :value="key.petKindId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="宠物大小" prop="petSize">
                <el-select v-model="queryParams.petSize" placeholder="请选择大小" clearable style="width:114px;">
                    <el-option
                            v-for="key in  Object.keys(petSize)"
                            :key="key"
                            :label="key"
                            :value="petSize[key]"></el-option>
                </el-select>
            </el-form-item>
            <el-button :icon="Search" @click="handleQuery" style="width:40px"/>
        </el-form>

    </div>

    <div id="petListInfo"  >
        <div id="petListInfo_Item" v-for="item in petStore.petList">
                <image-preview :src="item.petImages" :width="280" :height="210"/>
            <div class="pet-info">
                <h3>小名：{{item.petName}}</h3>
                <p v-if="item.petSize==0">体型:小体型</p>
                <p v-if="item.petSize==1">体型:中等体型</p>
                <p v-if="item.petSize==2">体型:大体型</p>
                <p v-if="item.petSex==0">性别:公</p>
                <p v-if="item.petSex==1">性别:母</p>
                <p>年龄:{{item.petAge}} 岁</p>
                <p>性格:{{item.petCharacter}}</p>
                <div class="product-price">价格:￥{{item.petPeice}}</div>

                <div class="pet-info-button">
                <el-tooltip content="领养" placement="top" effect="light">
                    <el-button @click="gotoPetInfo( `${item.petId}`)">了解更多</el-button>
                </el-tooltip>
                </div>
                <br/>

            </div>
        </div>
    </div>


<!--        <div style="margin-left: 90%;background-color: #67C23A">  <el-button    @click="getMorePet">获取更多</el-button></div>-->

    </div>

    <div id="petSearch-right">

        <div id="petSearch-right-title">

           <div id="petSearch-right-title-text">
               寻宠启示
           </div>
            <div id="petSearch-right-title-button" @click=" open2 = true" >
                发布启示
            </div>
        </div>

            <div id="petSearch-right-item" v-for="item in petStore.petLostList">
            <el-descriptions
                    :title="`${item.petCreateAt}`"
                    direction="vertical"
                    border
                    style="margin-top: 20px"
                    column="4"
            >
                <el-descriptions-item
                        :rowspan="2"
                        :width="140"
                        label="照片"
                        align="center"
                >
                    <image-preview :src="item.petLostImages" :width="120" :height="90" v-if="item.petLostImages!==null&&item.petLostImages!==undefined"/>
                </el-descriptions-item>
                <el-descriptions-item label="宠物名">{{item.petLostName }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{item.petLostHostName}}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{item.petLostPhone}}</el-descriptions-item>
                <el-descriptions-item label="启示内容">
                    &ensp; &ensp;{{item.petLostText}} {{item.petLostCustomerId}}
                </el-descriptions-item>
<!--                <el-descriptions-item label="Address">-->
<!--                    No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province-->
<!--                </el-descriptions-item>-->
            </el-descriptions>
        </div>

    </div>

        <el-dialog :title="title" v-model="open2" width="50%" append-to-body center="true">

            <template #header>
                <div class="dialog-footer" style="font-size: 25px">
                    {{title}}
                </div>
            </template>
                <el-form ref="petsRef" :model="form" :rules="rules" label-width="80px">

                    <el-form-item label="宠物图片" prop="petLostImages">
                        <image-upload v-model="form.petLostImages"/>
                    </el-form-item>
                    <el-form-item label="宠物名" prop="petLostName">
                        <el-input v-model="form.petLostName" placeholder="请输入宠物性格" />
                    </el-form-item>

                    <el-form-item label="联系人姓名" prop="petLostHostName">
                        <el-input v-model="form.petLostHostName" placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item label="联系人电话" prop="petLostPhone">
                        <el-input v-model="form.petLostPhone" placeholder="请输入电话号码" />
                    </el-form-item>

                    <el-form-item label="启示内容" prop="petLostText">
                        <el-input v-model="form.petLostText" type="textarea" placeholder="请输入内容" />
                    </el-form-item>


                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </template>
            </el-dialog>
    </div>

    <br/>
    <br/>
    <br/>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import usePetStore from '@/store/modules/pet';
    import {getToken} from "@/utils/auth.js";
    import {useRouter} from "vue-router";
    import { reactive } from 'vue';
    import { toRefs } from 'vue';
    import {my_if,petSize,petSx} from "@/const/myData"
    import { Search } from '@element-plus/icons-vue'
    import { toRaw } from 'vue';
    import {getCustomerId} from "@/utils/auth.js";

    const petStore = usePetStore()
    petStore.getPetList()
    petStore.getLostPetList();


    const open2 = ref(false)
    const title = ref("寻宠启示")
    const id = getCustomerId();
    function cancel() {
        open2.value = false;
        reSet()
    }
    /** 提交按钮 */
    function submitForm() {
        form.value.petLostCustomerId = id
        console.log(form.value)
        petStore.addLostPet(form.value)
        cancel()
    }
    function reSet(){
        form.value = {
            petLostImages: null, //图片
            petLostName: null,   //宠物名
            petLostHostName: null,
            petLostPhone: null,
            petLostText: null,
            petLostCustomerId:null,
        };
    }


    const router = useRouter();
    const showSearch = ref(true);
    const data = reactive({
        form: {},
        queryParams: {} as API.Pet,
        rules: {
            petSex: [
                { required: true, message: "性别 不能为空", trigger: "change" }
            ],
            petAge: [
                { required: true, message: "年龄不能为空", trigger: "blur" }
            ],
        }
    });

    const { queryParams, form, rules } = toRefs(data);

    /** 搜索按钮操作 */
    function handleQuery() {
        console.log(toRaw(queryParams.value))
        petStore.getPetListByPet(queryParams.value)
        reset()
    }

    function reset(){
        // # 重新设置请求参数实体属性
        queryParams.value = {
            petName: null,
            petSex: null,
            petAge: null,
            petKind: null,
            petSize: null,
        };
        // // # 指定表单属性值重置
        // this.$refs["form" ].resetFields();
    }




    //todo 每次加载更多时
    const num = 6
    let start= 0
    //要展示的宠物信息数组
    // let showPetList = ref([] as API.Pet[])


    const getMorePet=()=>{
        // let subArray = petStore.petList.slice(start, start+num);
        // showPetList = showPetList.concat(subArray);
        start = start +num
        console.log("=======================")
        // console.log(showPetList)
    }
    // getMorePet()



    const gotoPetInfo = (id:number) =>{
        console.log("==========goto info")
        if(getToken()){
            console.log(id)
            router.push("/petInfo/"+id);
        }else{
            alert("请先注册、登录！")
        }
    }
    import {getKindList} from "@/api/pet/kind.js"
    //获取当前宠物的类型
    const kindList = reactive([])
    getKindList().then((res: any)=>{
        kindList.value = res.rows
        console.log(res)
    })

</script>

<style scoped>

    *{
        margin: 0;
        padding: 0;
    }

    #petSearch-body{
        display: flex;
        background-image: url("../../../assets/images/list2.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    #petSearch-left{
        width: 70%;
        /*background-color: #48D1CC;*/
    }
    #petSearch{
        /*background-color: #c61d0e;*/
        margin: 10px;
    }
    #petListInfo{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    #petListInfo_Item{
        height: 420px;
        width:280px;
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin:10px 15px;
    }
    #petListInfo_Item  .pet-info{
        margin: 8px 10px 10px 10px;
    }
    .pet-info h3 {
        margin: 0;
        font-size: 20px;
        color: #333;
    }
    .pet-info p {
        margin: 5px 0;
        color: #666;
    }
    .pet-info-button{
        margin-left: 65%;
    }
    .product-price {
        font-size: 16px;
        color: #f00;
        font-weight: bold;
    }

    /*启示===================================================*/
    #petSearch-right{
        width:30%;
        /*background-color: #67C23A;*/
    }

    #petSearch-right-title{
        /*font-size: 50px;*/
        /*text-align: center;*/
        /*line-height: 80px;*/
        /*background-color: #1c84c6;*/
        display: flex;
        height: 70px;
    }
    /*寻宠物启示*/
    #petSearch-right-title-text{
        font-size: 50px;
        text-align: center;
        line-height: 80px;
        margin-left: auto;
        /*background-color: #76c683;*/

    }
    /*发布启示*/
    #petSearch-right-title-button{
        font-size: 20px;
        line-height: 20px;
        margin-top: 50px;
        width:25%;
        text-align: center;
        /*background-color: #c62826;*/
        cursor: pointer;
    }


</style>
